<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .add {
        border: 1px solid #000;
        max-width: 500px;
        margin-bottom: 20px;
        padding: 20px;
    }

    table,
    td,
    th {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 540px;
        text-align: center  ;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:
            <input type="text">
            品牌名称:
            <input type="text">
            <br>
            产品图片地址:
            <input type="text">
            价格:
            <input type="text">
        </div>
        <div class="tb">
            <table>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>
                        产品图片
                    </th>
                    <th>
                        编号
                    </th>
                    <th>
                        品牌名称
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                <tr v-for="item in goods">
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        <img width="50" :src="item.imgUrl" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.goodsName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        {{item.inventory}}
                    </td>
                    <td>
                        <button>删除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //增加
    //1.给输入框使用v-model绑定数据

    //2.往goods数组中,多增加一个对象,视图就会多增加一个,使用数组的push

    //删除

    //1.点击按钮,获取当前这条数据的索引

    //2.使用数组的方法splice(索引,1) 就能删除

    let vm = new Vue({
        el: "#app",
        data: {
            goods: [
                {
                    id: 1,
                    goodsName: "苹果",
                    imgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.d6d3aae7006611f68786a47e377c39ea?rik=7IrzMCwE5z2KgQ&riu=http%3a%2f%2fpic.ntimg.cn%2f20131028%2f13984383_171843651115_2.jpg&ehk=4SCA2042hzkkZofnLUSML2WgVzwz9RMXyKkXwc2zHG0%3d&risl=&pid=ImgRaw&r=0",
                    price: "20",
                    inventory: 30,
                    code: 1
                },
                {
                    id: 2,
                    goodsName: "香蕉",
                    imgUrl: "",
                    price: "120",
                    inventory: 310,
                    code: 2
                },
                {
                    id: 3,
                    goodsName: "橘子",
                    imgUrl: "",
                    price: "220",
                    inventory: 430,
                    code: 3
                },
            ]
        }
    })
</script>